<template>
<view>
<view :class="'product-window ' + (attribute.cartAttr==true?'on':'')">
   <view class="textpic acea-row row-between-wrapper">
      <view class="pictrue"><image :src="productSelect.image"></image></view>
      <view class="text">
         <view class="line1">{{productSelect.store_name}}</view>
         <view class="money font-color">
          ￥<text class="num">{{productSelect.price}}</text>
          <text class="stock">库存: {{productSelect.stock}}</text>
         </view>
      </view>
      <view class="iconfont icon-guanbi" @tap="close"></view>
   </view>
   <view class="productWinList">
      <view v-for="(item, index) in productAttr" :key="index" class="item">
         <view class="title">{{item.attr_name}}</view>
         <view class="listn acea-row row-middle">
            <view v-for="(itemn, indexn) in item.attr_value" :key="indexn" :class="'itemn ' + (item.checked==itemn.attr ?'on':'')" :data-indexw="index" :data-indexn="indexn" @tap="tapAttr">{{itemn.attr}}</view>
         </view>
      </view>
   </view>
   <view class="cart">
       <view class="title">数量</view>
       <view class="carnum acea-row row-left">
          <view :class="'reduce ' + (productSelect.cart_num <= 1 ? 'on':'')" @tap="CartNumDes">-</view>
          <view class="num">{{productSelect.cart_num}}</view>
          <view :class="'plus ' + (productSelect.cart_num >= productSelect.stock || productSelect.is_on ? 'on':'')" @tap="CartNumInt">+</view>
       </view>
   </view>
</view>
<view class="mask" catchtouchmove="true" :hidden="attribute.cartAttr==false" @tap="close"></view>
</view>
</template>

<script>
var app = getApp();

export default {
  data() {
    return {
      attrValue: [],
      attrIndex: 0,
      indexn: ""
    };
  },

  components: {},
  props: {
    attribute: {
      type: Object,
      default: () => {}
    },
    attrList: {
      type: Object,
      default: () => []
    },
    productAttr: {
      type: Object,
      default: () => []
    },
    productSelect: {
      type: Object,
      default: () => {}
    }
  },
  beforeMount: function () {},
  methods: {
    close: function () {
      this.$emit('myevent', {
        detail: {
          'window': false
        }
      });
    },
    CartNumDes: function () {
      this.$emit('ChangeCartNum', {
        detail: false
      });
    },
    CartNumInt: function () {
      this.$emit('ChangeCartNum', {
        detail: true
      });
    },
    tapAttr: function (e) {
      //父级index
      var indexw = e.currentTarget.dataset.indexw; //子集index

      var indexn = e.currentTarget.dataset.indexn; //每次点击获得的属性

      var attr = this.productAttr[indexw].attr_value[indexn]; //设置当前点击属性

      this.productAttr[indexw].checked = attr['attr'];
      this.setData({
        productAttr: this.productAttr
      });
      var value = this.getCheckedValue().sort().join(',');
      this.$emit('ChangeAttr', {
        detail: value
      });
    },
    getCheckedValue: function () {
      return this.productAttr.map(function (attr) {
        return attr.checked;
      });
    },
    ResetAttr: function () {
      for (var k in this.productAttr) this.productAttr[k].checked = '';

      this.setData({
        productAttr: this.productAttr
      });
    }
  }
};
</script>
<style>

.product-window{position:fixed;bottom:0;width:100%;left:0;background-color:#fff;z-index:88;border-radius:16rpx 16rpx 0 0;padding-bottom:140rpx;transform:translate3d(0,100%,0);transition:all .3s cubic-bezier(.25,.5,.5,.9);}
.product-window.on{transform:translate3d(0,0,0);}
.product-window .textpic{padding:0 130rpx 0 30rpx;margin-top:29rpx;position:relative;}
.product-window .textpic .pictrue{width:150rpx;height:150rpx;}
.product-window .textpic .pictrue image{width:100%;height:100%;border-radius:10rpx;}
.product-window .textpic .text{width:410rpx;font-size:32rpx;color:#202020;}
.product-window .textpic .text .money{font-size:24rpx;margin-top:40rpx;}
.product-window .textpic .text .money .num{font-size:36rpx;}
.product-window .textpic .text .money .stock{color:#999;margin-left:18rpx;}
.product-window .textpic .iconfont{position:absolute;right:30rpx;top:-5rpx;font-size:35rpx;color:#8a8a8a;}
.product-window .productWinList{max-height:395rpx;overflow:auto;margin-top:36rpx;}
.product-window .productWinList .item~.item{margin-top:36rpx;}
.product-window .productWinList .item .title{font-size:30rpx;color:#999;padding:0 30rpx;}
.product-window .productWinList .item .listn{padding:0 30rpx 0 16rpx;}
.product-window .productWinList .item .listn .itemn{border:1px solid #bbb;font-size:26rpx;color:#282828;padding:7rpx 33rpx;border-radius:6rpx;margin:14rpx 0 0 14rpx;}
.product-window .productWinList .item .listn .itemn.on{color:#fff;background-color:#ff3700;border-color:#ff3700;}
.product-window .cart{margin-top:36rpx;padding:0 30rpx;}
.product-window .cart .title{font-size:30rpx;color:#999;}
.product-window .cart .carnum{height:54rpx;margin-top:24rpx;}
.product-window .cart .carnum view{border:1px solid #a4a4a4;width:84rpx;text-align:center;height:100%;line-height:54rpx;color:#a4a4a4;font-size:45rpx;}
.product-window .cart .carnum .reduce{border-right:0;border-radius:6rpx 0 0 6rpx;line-height:48rpx;}
.product-window .cart .carnum .reduce.on{border-color:#e3e3e3;color:#dedede;}
.product-window .cart .carnum .plus{border-left:0;border-radius:0 6rpx 6rpx 0;line-height:46rpx;}
.product-window .cart .carnum .plus.on{border-color:#e3e3e3;color:#dedede;}
.product-window .cart .carnum .num{color:#282828;font-size:28rpx;}



</style>